import React, { Component } from 'react'
import { connect } from 'react-redux'

class Money extends Component {
  state = {
    navList: JSON.parse(JSON.stringify(this.props.navList)),
    flag: false
  }
  render() {
    const { navList, flag } = this.state
    return (
      <div>
        <header>
          <button onClick={() => {
            if (flag) {
              window.confirm('是否保存吗？') ? this.props.ADD(navList) : this.props.history.push('/home/homes')
            }
            this.props.history.push('/home/homes')
          }}
          >返回</button>
          <button onClick={() => {
            if (flag) {
              this.props.ADD(navList)
            }
            this.setState({
              flag: !flag
            })
          }}>{flag ? '保存' : '修改'}</button>
        </header>
        <main>
          <div>
            {/* 显示 */}
            {
              navList.filter(item => item.flag === true).map((item, index) => {
                return <p
                  key={index}
                  onClick={() => {
                    if (flag) {
                      navList.findIndex(items => items === item)
                      // console.log();
                      navList[navList.findIndex(items => items === item)].flag = false
                      this.setState({})
                    }
                  }}>{item.title}</p>
              })
            }

          </div>
          <hr />
          <div>
            {/* 不显示 */}
            {
              navList.filter(item => item.flag === false).map((item, index) => {
                return <p
                  key={index}
                  onClick={() => {
                    if (flag) {
                      //点击 改成true 就去上面
                      navList[navList.findIndex(items => items === item)].flag = true
                      //重新渲染页面
                      this.setState({})
                    }
                  }}>{item.title}</p>
              })
            }
          </div>
        </main>

      </div>
    )
  }
}
//获取redux状态
const mapStateToProps = (state) => {
  return state
}

const mapDispatchToProps = (dispatch) => {
  return {
    ADD(list) {
      dispatch({ type: 'CHANGE_ITEM', list })
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Money)